<template>
  <li
    @mousemove="mousemove"
    @mouseleave="mouseleave"
    :class="{ activeClass: activeId == true }"
    :changeIsCompleted="changeIsCompleted"
  >
    <input type="checkbox" name="" id="" v-model="isCompleted" />
    <span>{{ item.name }}</span>
    <button class="btn" v-show="deleteBtn" @click="deleteItem">删除</button>
  </li>
</template>
<script lang='ts'>
import { computed, defineComponent, inject, ref } from "vue";
import { Todo } from "../types/todo";
export default defineComponent({
  setup(props, { emit }) {
    const activeId = ref(false);
    const deleteBtn = ref(false);
    const mousemove = () => {
      activeId.value = true;
      deleteBtn.value = true;
    };
    const mouseleave = () => {
      activeId.value = false;
      deleteBtn.value = false;
    };
    const deleteItem = inject("deleteItem");
    const isCompleted = computed({
      get() {
        return props.item?.isCompleted;
      },
      set(val) {
        props.changeIsCompleted && props.changeIsCompleted(props.item, val);
      },
    });
    return {
      activeId,
      deleteBtn,
      mousemove,
      mouseleave,
      deleteItem,
      isCompleted,
    };
  },
  props: {
    item: {
      type: Object as () => Todo, //函数返回的还是Todo类型
      require: true,
    },
    changeIsCompleted: {
      type: Function,
      require: true,
    },
  },
});
</script>
<style scoped>
.activeClass {
  background-color: rgba(246, 250, 190, 0.4);
  color: red;
}
li {
  list-style: none;
}
.btn {
  float: right;
  background-color: red;
  color: aliceblue;
  border: 0;
}
</style>
